Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 361 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meditation App</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="video">
        <video autoplay loop>
            <source src="./assets/video/winter.mp4" type="video/mp4">
        </video>
    </div>

    <div class="app">
        <div class="audio">
            <audio>
                <source src="./assets/audio/meditation.mp3" type="audio/mpeg">
            </audio>
            <div class="pause">
                <img src="./assets/img/pause-button.png" alt="pause">
            </div>
            <div class="progress">
                <svg>
                    <rect class="rect1" stroke-width="10" rx="8" height="150" width="150" y="25" x="25" stroke="#F07281" fill="transparent"></rect>
                </svg>
                <svg>
                    <rect class="rect" stroke-width="10" rx="8" height="150" width="150" y="25" x="25" stroke="#FFFFFF" fill="transparent"></rect>
                </svg>
                <div class="audio-remaining-time">
                    00:00
                </div>
            </div>
            <div class="play">
                <img src="./assets/img/play-button.png" alt="play">
            </div>
        </div>
        <div class="durations">
            <div class="duration" audio-duration="10">
                <img src="./assets/img/2min.png" alt="10 s">
                <p>10 s</p>
            </div>
            <div class="duration" audio-duration="120">
                <img src="./assets/img/2min.png" alt="2 min">
                <p>2 min</p>
            </div>
            <div class="duration" audio-duration="300">
                <img src="./assets/img/5min.png" alt="5 min">
                <p>5 min</p>
            </div>
            <div class="duration" audio-duration="600">
                <img src="./assets/img/10min.png" alt="10 min">
                <p>10 min</p>
            </div>
            <div class="duration" audio-duration="1200">
                <img src="./assets/img/20min.png" alt="20 min">
                <p>20 min</p>
            </div>
        </div>
        <div class="seasons">
            <div class="season" video-src="./assets/video/winter.mp4">
                <img src="./assets/img/winter.png" alt="winter">
            </div>
            <div class="season" video-src="./assets/video/spring.mp4">
                <img src="./assets/img/spring.png" alt="spring">
            </div>
            <div class="season" video-src="./assets/video/summer.mp4">
                <img src="./assets/img/summer.png" alt="summer">
            </div>
            <div class="season" video-src="./assets/video/autumn.mp4">
                <img src="./assets/img/autumn.png" alt="autumn">
            </div>
            <div class="toggle-menu">
                <img src="./assets/img/right-arrow.png" alt="open menu">
            </div>
        </div>
    </div>

    <!-- JS -->
    <script src="./js/toggle-seasons-menu.js"></script>
    <script src="./js/hide-buttons.js"></script>
    <script src="./js/app.js"></script>
</body>
</html>

Share this file: